<template>
  <div class="register">
    <!--顶部 banner-->
    <top-bar></top-bar>
    <div class="register-tabs-container">
      <!--标签页-->
      <tabs @tabSwitch="tabSwitch" :tabsNames="tabsNames" :componentNames="componentNames"></tabs>
      <div class="register-tabs-bg">
        <!--注册组件-->
        <component v-bind:is="compIs" @setPassword="setPassword" keep-alive>
          <div class="register-help">
            <span class="exist">
              已有账号，
              <router-link to="/login" replace style="color: #165cd7">立即登录</router-link>
            </span>
          </div>
        </component>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBar/topBar";  // 顶部条
import tabs from "@/components/tabs/tabs";  // 标签页
import registerBar from "@/components/registerBar/registerBar";  // 注册条
import pwdSet from "@/components/registerBar/pwdSet";  // 设置密码
export default {
  name: "register",
  data() {
    return {
      // 当前要显示的组件
      compIs: 'registerBar',
      // 标签页的名字
      tabsNames: ['注册'],
      // 组件的名字
      componentNames: ['registerBar'],
      // 是否显示设置密码的界面
      isSetupPwd: false,
      // 显示弹出层
      show: false
    };
  },
  methods: {
    // 切换标签页
    tabSwitch(compName) {
      this.compIs = compName
    },
    // 注册账号 切换到设置密码组件
    setPassword(compName) {
      this.compIs = compName
    },
    // 显示层切换
    showPopup() {
      this.show = true
    }
  },
  mounted() {
    if (this.timeout) clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.show = true
    }, 100)
  },
  components: {
    topBar,
    tabs,
    registerBar,
    pwdSet
  }

};
</script>

<style lang="scss" scoped>
  @import "@/assets/styles/icon_small.scss";
  .register {
    height: 100%;
    background-color: white;
    .register-tabs-container {
      margin-top: -80px;
      .register-tabs-bg {
        width: 100%;
        box-sizing: border-box;
        background-color: white;
        padding-top: 32px;
        margin-top: 20px;
        border-radius: 12px 12px 0 0;

        /deep/ .registerBar {
          /*margin-top: 50px;*/
          padding: 0 20px;
          z-index: 1;
          .register-help {
            padding-top: 10px;
            font-size: 14px;
            .exist {
              color: #9ba2ac;
              width: 50%;
              text-align: center;
            }
          }
        }
      }

      /deep/ .tabs {
        padding: 0 20px;
        z-index: 1;
      }
    }
  }
</style>
<style>
  .van-button--large {
    border-radius: 4px;
    font-weight: 700;
  }
  .van-cell::after {
    border-bottom: none;
  }
</style>
